<template>
  <div class="home-container">
    <!-- 统计卡片行 -->
    <el-row :gutter="16" :first-child>
      <!-- 左侧：图书总数 -->
      <el-col :span="8">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>图书总数</span>
            </div>
          </template>
          <div class="stat-content">
            <div class="stat-value">{{ totalBooks }}</div>
            <div class="stat-title">当前馆藏</div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 中间：借阅中 -->
      <el-col :span="8">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>借阅中</span>
            </div>
          </template>
          <div class="stat-content">
            <div class="stat-value">{{ borrowedBooks }}</div>
            <div class="stat-title">正在借阅</div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧：可借阅 -->
      <el-col :span="8">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <span>可借阅</span>
            </div>
          </template>
          <div class="stat-content">
            <div class="stat-value">{{ availableBooks }}</div>
            <div class="stat-title">可借阅数量</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表和天气行 -->
    <el-row :gutter="16" :last-child>
      <!-- 左侧和中间：借阅统计图表 -->
      <el-col :span="16">
        <el-card class="borrow-stat-card">
          <template #header>
            <div class="card-header">
              <span>借阅统计</span>
            </div>
          </template>
          <div class="chart-content">
            <div class="chart-controls">
              <el-radio-group v-model="chartTimeRange" size="small">
                <el-radio-button label="week">周</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
                <el-radio-button label="year">年</el-radio-button>
              </el-radio-group>
            </div>
            <div ref="borrowTrendChart" class="trend-chart"></div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧：天气卡片 -->
      <el-col :span="8">
        <el-card class="weather-card">
          <div class="weather-container">
            <!-- 上部：城市和天气信息 -->
            <div class="top-section">
              <!-- 左侧：位置信息 -->
              <div class="location-section">
                <div class="current-location">
                  <span class="location-icon">📍</span>
                  <span>{{ weatherInfo.city }}{{ weatherInfo.district ? ' · ' + weatherInfo.district : '' }}</span>
                </div>
              </div>
              
              <!-- 右侧：天气信息 -->
              <div class="weather-section">
                <div class="emoji-icon">
                  <span v-if="weatherInfo.weather === '晴'">☀️</span>
                  <span v-else-if="weatherInfo.weather === '多云'">⛅</span>
                  <span v-else-if="weatherInfo.weather === '阴'">☁️</span>
                  <span v-else-if="weatherInfo.weather === '小雨'">🌦️</span>
                  <span v-else-if="weatherInfo.weather === '雨'">🌧️</span>
                  <span v-else-if="weatherInfo.weather === '雪'">❄️</span>
                  <span v-else>🌤️</span>
                </div>
                <div class="weather-details">
                  <div class="weather-temp">{{ weatherInfo.temperature }}°C</div>
                  <div class="weather-desc">{{ weatherInfo.weather }}</div>
                  <div class="weather-more">
                    <span>湿度: {{ weatherInfo.humidity }}</span>
                    <span>风力: {{ weatherInfo.windPower }}</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 分隔线 -->
            <div class="divider"></div>
            
            <!-- 下部：时间和日期 -->
            <div class="bottom-section">
              <!-- 左侧：时钟 -->
              <div class="clock-section">
                <div class="analog-clock">
                  <div class="clock-face">
                    <div class="hour-marks">
                      <div class="hour-mark" v-for="n in 12" :key="n" :style="{ transform: `rotate(${30 * n}deg)` }"></div>
                    </div>
                    <div class="clock-hand hour-hand" :style="{ transform: `rotate(${hourRotation}deg)` }"></div>
                    <div class="clock-hand minute-hand" :style="{ transform: `rotate(${minuteRotation}deg)` }"></div>
                    <div class="clock-hand second-hand" :style="{ transform: `rotate(${secondRotation}deg)` }"></div>
                    <div class="center-dot"></div>
                  </div>
                  <div class="digital-time">{{ currentTime }}</div>
                </div>
              </div>
              
              <!-- 右侧：日历 -->
              <div class="calendar-section">
                <div class="visual-calendar">
                  <div class="calendar-header">
                    <div class="year-month-selector">
                      <el-dropdown trigger="click" @command="handleYearSelect">
                        <span class="year-text">{{ currentYear }}年</span>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item v-for="year in yearRange" :key="year" :command="year">
                              {{ year }}年
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                      <el-dropdown trigger="click" @command="handleMonthSelect">
                        <span class="month-text">{{ currentMonthName }}</span>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item v-for="(month, index) in monthNames" :key="index" :command="index">
                              {{ month }}
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                    <div class="month-nav">
                      <el-icon class="nav-icon" @click="changeMonth(-1)"><ArrowUp /></el-icon>
                      <el-icon class="nav-icon" @click="changeMonth(1)"><ArrowDown /></el-icon>
                    </div>
                  </div>
                  <div class="weekday-header">
                    <div class="weekday" v-for="day in ['一', '二', '三', '四', '五', '六', '日']" :key="day">{{ day }}</div>
                  </div>
                  <div class="calendar-days">
                    <div 
                      v-for="day in calendarDays" 
                      :key="day.date" 
                      class="calendar-day" 
                      :class="{ 
                        'current-day': day.isCurrentDay, 
                        'other-month': !day.isCurrentMonth,
                        'weekend': day.isWeekend
                      }"
                    >
                      <div class="solar-day">{{ day.dayNumber }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
import { useBookStore } from '../stores/bookStore'
import { ArrowLeft, ArrowRight, ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import solarLunar from 'solarlunar'
import axios from 'axios'
import * as echarts from 'echarts'

const bookStore = useBookStore()
const totalBooks = ref(0)
const borrowedBooks = ref(0)
const availableBooks = ref(0)

// 当前时间和日期
const currentTime = ref('')
const currentDate = ref('')
let timer = null

// 时钟指针角度
const hourRotation = ref(0)
const minuteRotation = ref(0)
const secondRotation = ref(0)

// 日历数据
const calendarMonth = ref('')
const calendarDays = ref([])

// 当前显示的月份
const currentMonth = ref(new Date())
const currentMonthName = computed(() => monthNames[currentMonth.value.getMonth()])

// 添加年份和月份选择相关的数据
const currentYear = computed(() => currentMonth.value.getFullYear())
const yearRange = computed(() => {
  const year = currentYear.value
  return Array.from({ length: 11 }, (_, i) => year - 5 + i)
})
const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

// 更新时钟指针角度
const updateClockHands = (hours, minutes, seconds) => {
  // 时针旋转角度：每小时30度，再加上分钟带来的小幅度旋转
  hourRotation.value = (hours % 12) * 30 + minutes * 0.5
  // 分针旋转角度：每分钟6度
  minuteRotation.value = minutes * 6
  // 秒针旋转角度：每秒6度
  secondRotation.value = seconds * 6
}

// 更新日历数据的函数
const generateCalendarDays = () => {
  const now = new Date()
  const year = currentMonth.value.getFullYear()
  const month = currentMonth.value.getMonth()
  const today = now.getDate()
  
  // 设置月份标题
  calendarMonth.value = `${currentMonth.value.getMonth() + 1}月`;
  
  // 获取当月第一天是星期几
  const firstDay = new Date(year, month, 1).getDay()
  
  // 获取当月有多少天
  const daysInMonth = new Date(year, month + 1, 0).getDate()
  
  // 获取上个月有多少天
  const daysInPrevMonth = new Date(year, month, 0).getDate()
  
  const days = []
  
  // 添加上个月的末尾几天
  for (let i = firstDay - 1; i >= 0; i--) {
    const prevMonthDay = daysInPrevMonth - i
    const date = new Date(year, month - 1, prevMonthDay)
    
    days.push({
      dayNumber: prevMonthDay,
      isCurrentMonth: false,
      isCurrentDay: false,
      isWeekend: date.getDay() === 0 || date.getDay() === 6,
      date: date
    })
  }
  
  // 添加当月的天数
  for (let i = 1; i <= daysInMonth; i++) {
    const date = new Date(year, month, i)
    
    days.push({
      dayNumber: i,
      isCurrentMonth: true,
      isCurrentDay: i === today && month === now.getMonth() && year === now.getFullYear(),
      isWeekend: date.getDay() === 0 || date.getDay() === 6,
      date: date
    })
  }
  
  // 添加下个月的开头几天
  const remainingDays = 42 - days.length // 6行 x 7列 = 42
  for (let i = 1; i <= remainingDays; i++) {
    const date = new Date(year, month + 1, i)
    
    days.push({
      dayNumber: i,
      isCurrentMonth: false,
      isCurrentDay: false,
      isWeekend: date.getDay() === 0 || date.getDay() === 6,
      date: date
    })
  }
  
  calendarDays.value = days
}

// 切换月份
const changeMonth = (delta) => {
  const newDate = new Date(currentMonth.value)
  newDate.setMonth(newDate.getMonth() + delta)
  currentMonth.value = newDate
  generateCalendarDays()
}

// 监听currentMonth的变化
watch(currentMonth, () => {
  generateCalendarDays()
})

// 更新时间函数
const updateTime = () => {
  const now = new Date()
  
  // 获取时分秒
  const hours = now.getHours()
  const minutes = now.getMinutes()
  const seconds = now.getSeconds()
  
  // 更新时钟指针
  updateClockHands(hours, minutes, seconds)
  
  // 格式化时间 HH:MM:SS
  const formattedHours = String(hours).padStart(2, '0')
  const formattedMinutes = String(minutes).padStart(2, '0')
  const formattedSeconds = String(seconds).padStart(2, '0')
  currentTime.value = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`
  
  // 格式化日期 YYYY年MM月DD日 星期X
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const weekdays = ['日', '一', '二', '三', '四', '五', '六']
  const weekday = weekdays[now.getDay()]
  currentDate.value = `${year}年${month}月${day}日 星期${weekday}`
}

// 高德地图配置
const AMAP_KEY = '99282b41adde11b9352e13befd0a7278' // 需要替换为实际的Key

// 天气数据
const weatherInfo = ref({
  city: '',
  district: '',
  weather: '',
  temperature: '',
  humidity: '',
  windPower: ''
})

// 获取定位和天气信息
const getLocationAndWeather = async () => {
  try {
    let cityCode = '110000' // 默认北京
    let cityName = '北京市'
    let districtName = ''

    // 1. 尝试使用浏览器定位
    if (navigator.geolocation) {
      try {
        const position = await new Promise((resolve, reject) => {
          navigator.geolocation.getCurrentPosition(resolve, reject, {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
          })
        })

        console.log('浏览器定位成功:', position.coords)
        
        // 2. 使用经纬度反查城市信息
        const { latitude, longitude } = position.coords
        const regeoResponse = await axios.get(
          `https://restapi.amap.com/v3/geocode/regeo`,
          {
            params: {
              key: AMAP_KEY,
              location: `${longitude},${latitude}`,
              extensions: 'base',
              output: 'JSON'
            }
          }
        )

        if (regeoResponse.data.status === '1' && regeoResponse.data.regeocode) {
          const addressComponent = regeoResponse.data.regeocode.addressComponent
          cityCode = addressComponent.adcode
          cityName = addressComponent.city || addressComponent.province
          districtName = addressComponent.district || ''
          console.log('详细地址信息:', cityName, districtName)
        }
      } catch (error) {
        console.warn('浏览器定位失败，尝试IP定位:', error)
        // 3. 浏览器定位失败，尝试IP定位
        const ipResponse = await axios.get(
          `https://restapi.amap.com/v3/ip`,
          {
            params: {
              key: AMAP_KEY,
              output: 'JSON'
            }
          }
        )
        
        if (ipResponse.data.status === '1') {
          cityCode = ipResponse.data.adcode
          cityName = ipResponse.data.city
          // IP定位无法获取区县信息，需要额外请求
          if (cityCode) {
            const districtResponse = await axios.get(
              `https://restapi.amap.com/v3/config/district`,
              {
                params: {
                  key: AMAP_KEY,
                  keywords: cityCode,
                  subdistrict: 1,
                  output: 'JSON'
                }
              }
            )
            if (districtResponse.data.status === '1' && 
                districtResponse.data.districts?.[0]?.districts?.[0]) {
              districtName = districtResponse.data.districts[0].districts[0].name
            }
          }
          console.log('IP定位成功:', cityName, districtName)
        }
      }
    }

    // 4. 获取天气信息
    console.log('开始获取天气信息...')
    const weatherResponse = await axios.get(
      `https://restapi.amap.com/v3/weather/weatherInfo`,
      {
        params: {
          key: AMAP_KEY,
          city: cityCode,
          extensions: 'base',
          output: 'JSON'
        }
      }
    )
    
    console.log('天气信息响应:', weatherResponse.data)
    
    if (weatherResponse.data.status === '1' && weatherResponse.data.lives?.length > 0) {
      const weatherData = weatherResponse.data.lives[0]
      weatherInfo.value = {
        city: cityName || weatherData.city,
        district: districtName,
        weather: weatherData.weather,
        temperature: weatherData.temperature,
        humidity: weatherData.humidity + '%',
        windPower: weatherData.windpower + '级'
      }
      console.log('更新后的天气信息:', weatherInfo.value)
    } else {
      console.error('天气数据响应异常:', weatherResponse.data)
      setDefaultWeather()
    }
  } catch (error) {
    console.error('获取天气信息失败:', error)
    console.error('详细错误信息:', error.response?.data || error.message)
    setDefaultWeather()
  }
}

// 设置默认天气信息
const setDefaultWeather = () => {
  weatherInfo.value = {
    city: '北京市',
    district: '朝阳区',
    weather: '晴',
    temperature: '25',
    humidity: '50%',
    windPower: '3级'
  }
}

// 处理年份选择
const handleYearSelect = (year) => {
  const newDate = new Date(currentMonth.value)
  newDate.setFullYear(year)
  currentMonth.value = newDate
}

// 处理月份选择
const handleMonthSelect = (month) => {
  const newDate = new Date(currentMonth.value)
  newDate.setMonth(month)
  currentMonth.value = newDate
}

// 图表相关的响应式数据
const borrowTrendChart = ref(null)
const chartTimeRange = ref('week')

// 生成虚拟数据的辅助函数
const generateMockData = (type) => {
  const now = new Date()
  let data = []
  let labels = []
  
  switch (type) {
    case 'week':
      labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      data = [
        { name: '借出数量', data: [12, 15, 8, 20, 14, 10, 18] },
        { name: '归还数量', data: [10, 13, 7, 15, 12, 8, 16] }
      ]
      break
    case 'month':
      const daysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate()
      labels = Array.from({length: daysInMonth}, (_, i) => `${i + 1}日`)
      data = [
        {
          name: '借出数量',
          data: Array.from({length: daysInMonth}, () => Math.floor(Math.random() * 20 + 5))
        },
        {
          name: '归还数量',
          data: Array.from({length: daysInMonth}, () => Math.floor(Math.random() * 15 + 5))
        }
      ]
      break
    case 'year':
      labels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      data = [
        {
          name: '借出数量',
          data: [150, 180, 220, 280, 190, 230, 270, 200, 250, 290, 320, 280]
        },
        {
          name: '归还数量',
          data: [140, 160, 200, 260, 180, 220, 250, 190, 230, 270, 300, 260]
        }
      ]
      break
  }
  
  return { labels, data }
}

// 更新图表的函数
const updateChart = () => {
  if (!borrowTrendChart.value) return
  
  const chart = echarts.init(borrowTrendChart.value)
  const { labels, data } = generateMockData(chartTimeRange.value)
  
  const option = {
    title: {
      text: '图书借还统计',
      subtext: chartTimeRange.value === 'week' ? '最近一周' : 
               chartTimeRange.value === 'month' ? '本月' : '今年',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['借出数量', '归还数量'],
      bottom: '0%'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: labels,
      axisLabel: {
        interval: chartTimeRange.value === 'month' ? 'auto' : 0
      }
    },
    yAxis: {
      type: 'value',
      name: '数量'
    },
    series: data.map(series => ({
      name: series.name,
      type: 'bar',
      data: series.data,
      itemStyle: {
        borderRadius: [4, 4, 0, 0]
      },
      barMaxWidth: 30
    }))
  }
  
  chart.setOption(option)
}

// 监听时间范围变化
watch(chartTimeRange, () => {
  nextTick(updateChart)
})

// 在 onMounted 中初始化图表
onMounted(async () => {
  await bookStore.fetchBooks()
  totalBooks.value = bookStore.books.length
  borrowedBooks.value = bookStore.borrowedBooks.length
  availableBooks.value = totalBooks.value - borrowedBooks.value
  
  // 初始化时间并设置定时器每秒更新一次
  updateTime()
  timer = setInterval(updateTime, 1000)
  
  // 生成日历数据
  generateCalendarDays()
  
  // 获取真实的天气数据
  await getLocationAndWeather()
  // 每30分钟更新一次天气
  setInterval(getLocationAndWeather, 30 * 60 * 1000)
  
  // 初始化图表
  nextTick(() => {
    updateChart()
  })
  
  // 添加窗口大小变化的监听
  window.addEventListener('resize', () => {
    if (borrowTrendChart.value) {
      echarts.getInstanceByDom(borrowTrendChart.value)?.resize()
    }
  })
})

// 在 onUnmounted 中清理
onUnmounted(() => {
  // 清除定时器，避免内存泄漏
  if (timer) {
    clearInterval(timer)
  }
  
  // 移除窗口大小变化的监听
  window.removeEventListener('resize', () => {
    if (borrowTrendChart.value) {
      echarts.getInstanceByDom(borrowTrendChart.value)?.resize()
    }
  })
})
</script>

<style scoped>
.home-container {
  padding: 8px;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 统计卡片行 */
.el-row:first-child {
  flex: 0 0 auto;
  margin: 0 !important;
  min-height: 120px;
}

/* 图表和天气行 */
.el-row:last-child {
  flex: 1;
  margin: 0 !important;
  margin-top: 8px !important;
  min-height: 0;
}

.el-col {
  height: 100%;
}

/* 统计卡片样式 */
.stat-card {
  height: 100%;
  margin: 0;
}

/* 借阅统计卡片样式 */
.borrow-stat-card {
  height: 100%;
  margin: 0;
}

/* 天气卡片样式 */
.weather-card {
  height: 100%;
  margin: 0;
}

.card-header {
  padding: 8px;
  min-height: auto;
}

.stat-content {
  padding: 8px 0;
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-title {
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.chart-content {
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.chart-controls {
  position: absolute;
  right: 16px;
  top: 0;
  z-index: 1;
}

.chart-controls :deep(.el-radio-group) {
  background: rgba(255, 255, 255, 0.9);
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
}

.chart-controls :deep(.el-radio-button__inner) {
  border: none;
  padding: 6px 16px;
  font-size: 13px;
  background: transparent;
}

.chart-controls :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
  background: #409eff;
  box-shadow: none;
}

.trend-chart {
  width: 100%;
  height: calc(100% - 48px);
  min-height: 300px;
}

.weather-container {
  display: flex;
  flex-direction: column;
  padding: 8px;
  height: 100%;
}

/* 上部：城市和天气信息 */
.top-section {
  display: flex;
  justify-content: space-between;
  padding-bottom: 2px;
  height: 20%;
  min-height: 50px;
}

/* 左侧：位置信息 */
.location-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.current-location {
  display: flex;
  align-items: center;
  font-size: 15px;
}

.location-icon {
  margin-right: 4px;
  font-size: 16px;
}

/* 右侧：天气信息 */
.weather-section {
  display: flex;
  align-items: center;
}

.emoji-icon {
  font-size: 32px;
  margin-right: 10px;
}

.weather-details {
  display: flex;
  flex-direction: column;
}

.weather-temp {
  font-size: 20px;
  margin-bottom: 2px;
}

.weather-desc {
  font-size: 13px;
  margin-bottom: 1px;
}

.weather-more {
  font-size: 11px;
}

/* 分隔线 */
.divider {
  height: 1px;
  background-color: var(--el-border-color-lighter);
  margin: 4px 0;
}

/* 下部：时间和日期 */
.bottom-section {
  display: flex;
  justify-content: space-between;
  flex: 1;
  height: 80%;
  padding-top: 2px;
  min-height: 0; /* 重要：允许flex子项缩小 */
}

/* 左侧：时钟 */
.clock-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
}

.analog-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clock-face {
  position: relative;
  width: 100px;
  height: 100px;
  background: linear-gradient(145deg, #f9fafc, #e8eaed);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 
              inset 0 2px 4px rgba(255, 255, 255, 0.8),
              inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clock-face::before {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4));
  z-index: 0;
}

.hour-marks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hour-mark {
  position: absolute;
  background: #606266;
  top: 5px;
  left: 50%;
  transform-origin: 1px 55px;
}

.hour-mark:nth-child(3n) {
  width: 2px;
  height: 8px;
  background: #303133;
}

.hour-mark:not(:nth-child(3n)) {
  width: 1px;
  height: 4px;
  background: #909399;
}

.clock-hand {
  position: absolute;
  transform-origin: bottom center;
  bottom: 50%;
  left: calc(50% - 1px);
  border-radius: 10px;
  z-index: 2;
}

.hour-hand {
  width: 4px;
  height: 25px;
  background: #303133;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.minute-hand {
  width: 2px;
  height: 35px;
  background: #606266;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.second-hand {
  width: 1px;
  height: 40px;
  background: #f56c6c;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.center-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #f56c6c;
  border: 2px solid #303133;
  border-radius: 50%;
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  z-index: 3;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.digital-time {
  margin-top: 4px;
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #303133;
  background: linear-gradient(145deg, #f5f7fa, #e4e7ed);
  padding: 4px 8px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* 右侧：日历 */
.calendar-section {
  display: flex;
  flex-direction: column;
  width: 70%;
  border-left: 1px solid var(--el-border-color-lighter);
  padding-left: 12px;
  height: 100%;
}

.visual-calendar {
  width: 100%;
  background: #f5f7fa;
  border-radius: 6px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
  background: #f5f7fa;
}

.year-month-selector {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
}

.year-text, .month-text {
  cursor: pointer;
  padding: 2px 4px;
}

.year-text:hover, .month-text:hover {
  color: #409eff;
}

.month-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-icon {
  cursor: pointer;
  font-size: 12px;
  color: #606266;
}

.nav-icon:hover {
  color: #409eff;
}

.weekday-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f5f7fa;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 500;
}

.weekday {
  text-align: center;
  color: #606266;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  background: #fff;
  border-top: 1px solid #ebeef5;
}

.calendar-day {
  height: 26px;
  padding: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.calendar-day:nth-child(7n) {
  border-right: none;
}

.solar-day {
  font-size: 12px;
  font-weight: 500;
  color: #303133;
}

.current-day {
  background: #409eff;
  color: #fff;
}

.other-month {
  color: #c0c4cc;
  background: #fafafa;
}

.weekend .solar-day {
  color: #f56c6c;
}

.other-month .weekend .solar-day {
  color: #ffa39e;
}
</style>
